<template>
	<div class="mapMain">
		<!---map test start-->
		<div>
			<el-input v-model="mapData.keyword" style="width: 80%; height: 30px;" @keydown.enter="search" />
			<el-button @click="search" class="searchBtn" type="primary">
				搜索
			</el-button>
			<!-- <button @click="zoomIn">
                放大
                </button>
                <button @click="zoomOut">
                缩小
                </button> -->
			<div>经度：{{ lng }}</div>
			<div>纬度：{{ lat }}</div>
			<div>省：{{ province }}</div>
			<div>市：{{ city }}</div>
			<div>县：{{ country }}</div>
		</div>
		<div class="mapTest" id="mapContainer">

		</div>
		<!---map test end-->
	</div>
</template>
<script setup lang="ts">
	import { ref, toRefs, reactive, getCurrentInstance, onMounted, onUnmounted, watch } from 'vue'
	import AMapLoader from "@amap/amap-jsapi-loader";
	let map = ref(null);
	const mapData = reactive({
		map: {},
		keyword: '',
		selectedLocation: {},
		selectedAddress: '',
		marker: null, // 用于存储选中位置的标记
	})
	const lng = ref(0)
	const lat = ref(0)
	const province = ref(null)
	const city = ref(null)
	const country = ref(null)
	const emit = defineEmits();
	const address = ref(null)
	
	const editMode = ref(false)
	const editLng = ref(0)
	const editLat = ref(0)

	const props = defineProps({
		parentData: Object
	})

	const { parentData } = toRefs(props)

	watch(parentData, () => {
		lng.value = parentData.value.lon
		lat.value = parentData.value.lat
		province.value = parentData.value.province
		city.value = parentData.value.city
		country.value = parentData.value.country
		mapData.keyword = parentData.value.address
		console.log('222222222222222222')
		emit('getMarkAddress', {
			lng: lng.value,
			lat: lat.value,
			province: province.value,
			city: city.value,
			country: country.value,
			address: mapData.keyword,
		})
	})

	function getAddress(lng, lat) {
		let geoCoder = new AMap.Geocoder()
		geoCoder.getAddress([lng, lat], (status, result) => {
			if (status === 'complete' && result.regeocode) {
				console.log('result', result)
				mapData.keyword = result.regeocode.formattedAddress
				province.value = result.regeocode.addressComponent.province
				city.value = result.regeocode.addressComponent.city ? result.regeocode.addressComponent.city : result.regeocode.addressComponent.province
				country.value = result.regeocode.addressComponent.district
				// let resObj = toRefs({
				//     lng,
				//     lat,
				//     province,
				//     city,
				//     region,
				// })
				emit('getMarkAddress', {
					lng,
					lat,
					province,
					city,
					country,
					address: mapData.keyword,
				})
			}
		})
	}

	// 重置
	function resetInit() {
		mapData.keyword = ''
		province.value = ''
		city.value = ''
		country.value = ''
		lng.value = 0
		lat.value = 0
		// 移除之前的标记
		if (mapData.marker) {
			mapData.marker.setMap(null)
		}
		editMode.value = false
		editLng.value = 0
		editLat.value = 0
		// 将地图中心设置为选中位置
		// mapData.map.setCenter([lng.value, lat.value])
	}
	// 编辑回显位置
	function init(row) {
		if (!row) {
			return
		}
		console.log('row', row)
		mapData.keyword = row.address
		province.value = row.province
		city.value = row.province
		country.value = row.country
		lng.value = row.lng
		lat.value = row.lat
		// 移除之前的标记
		if (mapData.marker) {
			mapData.marker.setMap(null)
		}

		editLng.value = row.lng
		editLat.value = row.lat
		editMode.value = true
		// todo  不知道为啥报错 顺序问题 ？？ 
		// setTimeout(function(){
		//       
		// 创建新的标记
		const marker = new AMap.Marker({
			position: [lng.value, lat.value],
			icon: 'https://mzmpic.oss-cn-beijing.aliyuncs.com/custom/212c8d3e52d80dbceb2bd575f52af091.png',//'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 选中位置的图标
			offset: new AMap.Pixel(-15, -30), // 调整图标的偏移位置
		})

		// 将标记添加到地图
		marker.setMap(mapData.map)

		// 存储选中位置的标记
		mapData.marker = marker

		// 将地图中心设置为选中位置
		mapData.map.setCenter([lng.value, lat.value])

		// }, 5000)

	}
	defineExpose({ init, resetInit })
	onMounted(() => {
		window._AMapSecurityConfig = {
			securityJsCode: 'c100a1dec521518acc0fa32dee77d9d0', // 密钥
		}
		AMapLoader.load({
			key: "872463d5f9926f3560506443698de6f0", // 申请好的Web端开发者Key，首次调用 load 时必填
			version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			plugins: [
				"AMap.Geolocation", // 定位控件，用来获取和展示用户主机所在的经纬度位置
				"AMap.Geocoder", // 地理编码与逆地理编码服务，用于地址描述与坐标间的相互转换
				"AMap.Autocomplete",
				"AMap.PlaceSearch",
				"AMap.CitySearch",
			], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
		})
			.then((AMap) => {
				console.log('123123123123', lng.value, lat.value)
				// map = new AMap.Map("mapTest", {
				//         // 设置地图容器id
				//         viewMode: "3D", // 是否为3D地图模式
				//         zoom: 11, // 初始化地图级别
				//         center: [116.397428, 39.90923], // 初始化地图中心点位置
				// });
				const mapInstance = new AMap.Map('mapContainer', {
					viewMode: '2D',
					zoom: 11,
					center: [lat.value, lng.value],
					layers: [
						new AMap.TileLayer.RoadNet(),
						new AMap.TileLayer.WMS({
							url: 'https://ahocevar.com/geoserver/wms',
							blend: false,
							tileSize: 512,
							params: {
								LAYERS: 'topp:states',
								VERSION: '1.3.0',
							},
						}),
					],
					scrollWheel: true, // 启用滚动缩放
				})
				mapInstance.on('click', (e) => {
					// 根据坐标获取位置信息
					getAddress(e.lnglat.getLng(), e.lnglat.getLat())

					lng.value = e.lnglat.getLng()
					lat.value = e.lnglat.getLat()

					// 移除之前的标记
					if (mapData.marker) {
						mapData.marker.setMap(null)
					}

					// 创建新的标记
					const marker = new AMap.Marker({
						position: [lng.value, lat.value],
						icon: 'https://mzmpic.oss-cn-beijing.aliyuncs.com/custom/212c8d3e52d80dbceb2bd575f52af091.png',//'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 选中位置的图标
						offset: new AMap.Pixel(-15, -30), // 调整图标的偏移位置
					})

					// 将标记添加到地图
					marker.setMap(mapInstance)

					// 存储选中位置的标记
					mapData.marker = marker

					// 将地图中心设置为选中位置
					mapData.map.setCenter([lng.value, lat.value])
				})

				mapData.map = mapInstance
				mapInstance.on('complete', (e) => {
					console.log('地图加载完成', editMode.value);

					// 初次加载就是回显数据
					if (editMode.value) {
						console.log('需要回显')
						// // 将地图中心设置为选中位置
						mapInstance.setCenter([editLng.value, editLat.value])
						// 创建新的标记
						const marker = new AMap.Marker({
							position: [editLng.value, editLat.value],
							icon: 'https://mzmpic.oss-cn-beijing.aliyuncs.com/custom/212c8d3e52d80dbceb2bd575f52af091.png',//'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 选中位置的图标
							offset: new AMap.Pixel(-15, -30), // 调整图标的偏移位置
						})

						// 将标记添加到地图
						marker.setMap(mapInstance)

						// 存储选中位置的标记
						mapData.marker = marker
						// 将地图中心设置为选中位置
						mapData.map.setCenter([lng.value, lat.value])
					}
				})

			})
			.catch((e) => {
				console.log(e);
			});

	});

	onUnmounted(() => {
		mapData.map?.destroy();
	});

	function search() {
		if (mapData.keyword) {
			AMapLoader.load({
				key: '',
				version: '1.4.15',
				plugins: ['AMap.PlaceSearch'],
			})
				.then((AMap) => {
					const placeSearch = new AMap.PlaceSearch({
						city: '全国', // 请根据实际情况设置城市
						map: mapData.map,
					})
					placeSearch.search(mapData.keyword, (status, result) => {
						console.log(result) // 输出完整的搜索结果
						if (status === 'complete') {
							const pois = result.poiList.pois
							if (pois.length > 0) {
								const { location } = pois[0]

								// 移除之前的标记
								if (mapData.marker) {
									mapData.marker.setMap(null)
								}

								// 创建新的标记
								const marker = new AMap.Marker({
									position: location,
									icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
									offset: new AMap.Pixel(-15, -30),
								})

								// 根据经纬度获取位置
								getAddress(location.lng, location.lat)

								lng.value = location.lng
								lat.value = location.lat

								// 将标记添加到地图
								marker.setMap(mapData.map)

								// 存储选中位置的标记
								mapData.marker = marker

								// 将地图中心设置为选中位置
								mapData.map.setCenter(location)
							}
						}
						else {
							console.log('搜索失败或无结果')
						}
					})
				})
				.catch((e) => {
					console.log(e)
				})
		}
	}

	function zoomIn() {
		mapData.map.zoomIn()
	}

	function zoomOut() {
		mapData.map.zoomOut()
	}
</script>
<style scoped>
	.mapMain {
		width: 100%;
	}

	.mapTest {
		border: 1px solid #eee;
		height: 400px;
	}

	.searchBtn {
		margin-left: 10px;
	}
</style>